<template>
   <div class="box">
      <div class="content" >
<!--        显示文章列表-->
            <ArticleCard :list="obj.articles" class="articleCard"></ArticleCard>
      </div>
      <div class="aside">
          <div class="aside-card" style="height: 400px;margin-top: 50px">
                <Carousel :image-list="obj.imageList" style="height: 100%;"></Carousel>
          </div>
          <div class="aside-card" style="height: 200px">
                <SingleDog></SingleDog>
          </div>
          <div class="aside-card" style="height: 400px">
              <div style="width: 100%;font-size: 20px;text-align: center;margin-top: 20px"

              >
                  分类标签
              </div>
              <el-tag :type="getTabColor(i.tId)" effect="dark" v-for="i in obj.tabs" style="margin: 20px 10px 0 10px">
                 <router-link :to="{
                     path:'/tabArticles',
                     query:{
                         tId:i.tId
                     }
                 }"
                      style="text-decoration: none;color: white">
                     {{i.tName}}
                 </router-link>
              </el-tag>
          </div>

<!--        最近文章查看数 -------------------------------------------->

          <div class="aside-card flex-center-col" style="padding-bottom: 30px">
              <div style="width: 100%;font-size: 20px;text-align: center;margin-top: 20px;margin-bottom: 20px">最近观看最多</div>

<!--              文章项-->
               <div v-for="(item,index) in obj.top10Articles"
                    style="width: 100%;height: 25px;margin:10px 20px 10px 20px;text-align: left;" class="flex-center">
                   <div class="top-article-item">
                       <router-link :to="{
                           path:'/article',
                           query:{
                               aId:item.aId
                           }
                       }" >

                           <span :style="{color:getTopColor(index),fontSize:getTopFontSize(index)}">
                               {{(index+1)+'.'+ item.aTitle}}
                           </span>
                       </router-link>

                   </div>
                   <div style=" width: 85px;">
                       <i class="el-icon-view"></i>
                       {{getViewFormat(item.view)}}
                       </div>
               </div>

          </div>


          <div class="flex-center-col web-year-visitor-box" >
              网站访客数
              <div style="color:tomato;">
                  {{obj.visitor.length}}
              </div>
          </div>


      </div>
   </div>


</template>

<script>
    import ArticleCard from "@/components/article/ArticleCard";
    import {computed, reactive, ref} from "@vue/reactivity";
    import SingleDog from "@/components/user/SingleDog";
    import Carousel from "@/components/article/Carousel";
    import axios from 'axios'
    import {useStore} from "vuex";
    import service from "@/assets/js/service.js";
    import {articleSort, numberFormat} from "@/assets/js/utils";
    import {onMounted} from "@vue/runtime-core";

    export default {
        name: "Body",
        components: {Carousel, SingleDog, ArticleCard},
        setup(){


           let obj=reactive({
               visitor:{
                 length:0
               },
               tabs:{},
               articles:[],
               top10Articles:[],
               imageList:[
                   {
                       url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1407%2F07%2Fc27%2F36070129_1404748395584.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654174199&t=8afc782197af347d5b8958f3bae33f48",
                       title:"勇攀高峰",
                       text:"学习永无止境"
                   },
                   {
                       url: "https://img2.baidu.com/it/u=1035908580,4028875110&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1000",
                       title: "生活",
                       text: "人无再少年,珍惜今日"
                   }

               ]
           })


            const tabColorList=['success','info','warning','danger']
            let getTabColor=computed(()=>(i)=>{
                // const index=Math.ceil(Math.random()*tabColorList.length)
                // return tabColorList[index]
                return tabColorList[i%tabColorList.length]
            })



            // 排行榜字体颜色
            let getTopColor=computed(()=>(index)=>{
                if(index===0){
                    return 'tomato'
                }else if(index===1){
                    return '#9EC2F7'
                }else if(index===2){
                    return '#FCC181'
                }
                return 'white'
            })
            // 排行榜字体大小
            let getTopFontSize=computed(()=>(index)=>{
                if(index===0){
                    return '20px'
                }else if(index===1){
                    return '18px'
                }else if(index===2){
                    return '16px'
                }
                return '14px'
            })

            let getViewFormat=computed(()=>(view)=>{
                return numberFormat(view);

            })
            let initYearVisitor=()=>{
               let data=service.getVisitor('year',false)
                data.then(resp=>{
                    if(resp.code === 200 ){
                        obj.visitor.length=resp.data
                    }
                })
            }


            onMounted(()=>{
                initYearVisitor()
                setInterval(()=>{
                    initYearVisitor()
                },1000*10)
            })
           return{
              obj,
               getTabColor,
               getTopColor,
               getTopFontSize,
               getViewFormat


           }
        },
        async mounted() {
            const store=useStore()
            // 请求所有文章
            const artData=await service.getAllArticles()

            if(artData!=null){
                if(artData.code===200){
                    this.obj.articles=artData.data.list
                    await store.dispatch('addArticles', this.obj.articles)
                }
            }


            // 请求所有标签
            const tabData = await getTabs()
            if(tabData!=null){
                if(tabData.code===200){

                    this.obj.tabs=tabData.data
                    await store.dispatch('addTabs', this.obj.tabs)
                }
            }

            const top10= await service.getTop10Articles()
            if(top10!=null){
                if(top10.code===200){
                    this.obj.top10Articles=top10.data

                }
            }


        }
    }


    // 获取所有标签
    function getTabs() {
        return axios.get("/api/tabs").then(resp=>resp.data)
    }
</script>

<style scoped lang="less">


    @Aside-width:300px;
    @Aside-background-color:#4F5F6E;
   .box{

      width: 100%;
      min-width: 1200px;
      min-height: 2500px;
      display: flex;

      background-color: var(--theme-color);
      .content{
          display: flex;
          justify-content: flex-end;

          color: white;
          flex:7;
          margin-bottom: 50px;
          .articleCard{
              margin-top: 20px;
              height: 100%;
          }

      }
      .aside{
        flex: 2;
        max-width: 400px;
         display: flex;
         flex-direction: column;

        height:1500px;

        color: white;

            .aside-card{
                width:@Aside-width;
                margin-bottom: 20px;
                background-color:@Aside-background-color;
                border-radius: 10px;
            }



            .web-year-visitor-box{
                width: @Aside-width;
                border-radius: 5px;
                height: 100px;
                background-color:@Aside-background-color;
                div{
                    margin: 10px;
                }
                :last-child{
                    font-size: 30px;
                }
            }

      }
   }
    .top-article-item{
        width: 200px;
        height:100%;
        overflow: hidden;
        text-overflow: ellipsis;
        border-bottom: 2px solid transparent;
        transition: all 0.3s;
        white-space: nowrap;
        margin-left: 10px;
        a{
            text-decoration: none;
            color: rgba(255, 255, 255, 0.86);
            transition: all 0.3s;
        }

    }
    .top-article-item:hover{
        border-bottom: 2px solid #42b983;

        a{
            color: #42b983;
        }
    }

</style>